<template>
	<div class="sign_box">
		<div class="text">
			请在空白区域横向书写
		</div>
		<div class="canvaspanel">
			<div class="canvasborder">
				<Vue3Esign ref="vueEsignRef" :width="clientWidth" :height="clientHeight" :is-crop="isCrop"
					:line-width="lineWidth" :line-color="lineColor" />
			</div>
			<div class="buttongroup">
				<van-button color="#d4e8ff" style="color: #000;width: 100px;" @click="esignReset">
					重写
				</van-button>
				<van-button color="linear-gradient(to right, #2E9BEF, #0168B7)" style="margin-left: 10px;width: 100px;"
					@click="create">
					确认
				</van-button>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		useRoute,
		useRouter
	} from 'vue-router'
	import {
		showConfirmDialog,
		showToast,
		showLoadingToast,
		closeToast
	} from 'vant'

	import service from "@/api";

	const route = useRoute()
	const router = useRouter()

	const vueEsignRef = ref(null)
	const lineWidth = ref(5)
	const lineColor = ref('#000000')
	const isCrop = ref(true)
	const hasSign = ref(false)
	const clientWidth = ref(document.documentElement.clientWidth)
	const clientHeight = ref(document.documentElement.clientHeight)

	const orderno = route?.query?.orderno || '';
	const openId = route?.query?.openId || '';

	const esignReset = async () => {
		vueEsignRef.value.reset()
	}
	const create = async () => {
		try {
			debugger
			let res = await vueEsignRef.value.generate()
			const r = service
				.uploadSign({
					itype: "saleorder_upload", //订单查询
					info: {
						orderNo: orderno,
						openId: openId,
						fileData: res.replace('data:image/png;base64,','')
					},
				})
				.then((re) => {
					if (re.status == "success") {
						

						showToast({
						message: '上传签字图片成功',
						duration: 3000,
						});
						setTimeout(()=>{router.back()},1500)
					} else {
						closeToast()
						showToast(re.message);
					}

				});

			// const bl = convertBase64UrlToBlob(res)
			// addByBaseCode({ // 此处用了项目中一个接口向后端传了base64的图片
			//   imgStr: res,
			// }).then((response) => {
			//   hasSign.value = true
			// })
		} catch (error) {
			console.error('error', error)
			showToast('请先签字')
		}
	}
</script>
<style scoped>
	#app {
		padding: 0;
	}

	body {
		display: block;
	}

	.sign_box {
		padding: 0;
		width: 100vw;
		height: 100vh;
		background-color: #F5F5F5;
	}

	.canvasborder {
		border: solid 1px #ccc;
	}

	.canvaspanel {
		position: relative;
	}

	.text {
		color: #919191;
		display: flex;
		justify-content: center;
		align-items: center;
		transform: rotate(90deg);
		z-index: 10;
		right: -16vw;
		position: fixed;
		top: 32vw;
	}

	.buttongroup {
		display: flex;
		justify-content: center;
		align-items: center;
		transform: rotate(90deg);
		z-index: 10;
		left: -16vw;
		position: fixed;
		bottom: 100px;
	}
</style>